<template>
    <div class="background">
        <div class="logo">
            <img src="../../assets/img/logo.png" alt="">
        </div>
        <div class="loginBox">
            <h1>密码登录</h1>
            <div class="loginForm">
                <el-form :model="loginForm" style="width: 250px">
                    <el-form-item>
                        <el-input v-model="loginForm.username" placeholder="请输入帐号" />
                    </el-form-item>
                    <el-form-item>
                        <el-input v-model="loginForm.password" placeholder="请输入密码" />
                    </el-form-item>
                    <el-form-item>
                        <el-button class="loginBtn" type="primary" @click="onLogin">登录</el-button>
                    </el-form-item>
                    <div class="tip">
                        <span style="cursor: pointer;" @click="router.push('/register')">注册账号</span>
                        <span>找回密码</span>
                        <span>意见反馈</span>
                    </div>
                </el-form>
            </div>

        </div>
        <div class="footer">
            <p>反馈建议 | 官方空间 | 空间活动 | 空间应用 | 腾讯原创馆 | QQ互联 | QQ登录 | 应用侵权投诉 | Complaint Guidelines</p>
            <p>Copyright © 2005 - 2025 Tencent.All Rights Reserved.</p>
            <p>腾讯公司 版权所有 粤网文[2014]0633-233号</p>
        </div>
    </div>
</template>

<script setup>
import { ElMessage } from 'element-plus';
import api from '../../api/index'
import { reactive } from 'vue'
import { useRouter } from 'vue-router';
import { useStore } from 'vuex';
const loginForm = reactive({
    username: '',
    password: ''
})
const router = useRouter()
const store = useStore()
// 登录
const onLogin = async () => {
    const res = await api.login(loginForm);
    // console.log(res)
    if (res.code === 200) {
        store.dispatch('login', { token: res.token, userid: res.userid })
        router.push('/')
    }
    else {
        ElMessage.error(res.message || '登录失败')
    }
}
</script>

<style lang="less" scoped>
.background {
    background: url(../../assets/img/background.webp) no-repeat;
    // 设置背景图片大小
    background-size: cover;
    height: 100vh;
    background-position: 0 -150px;
    overflow: hidden;

    .logo {
        position: absolute;
        top: 10vh;
        left: 25vw;

        img {
            width: 250px;
        }
    }

    .loginBox {
        background-color: white;
        width: 400px;
        height: 300px;
        margin-left: 50vw;
        margin-top: 20vh;
        overflow: hidden;

        h1 {
            text-align: center;
            font-size: 20px;
            margin: 30px 0;
        }

        .loginForm {
            margin-left: 75px;

            .loginBtn {
                width: 100%;
            }

            .tip {
                font-size: 14px;
                display: flex;
                justify-content: space-between;
            }
        }
    }

    .footer {
        position: absolute;
        bottom: 50px;
        left: 50%;
        transform: translateX(-50%);
        font-size: 14px;
        text-align: center;
        color: white;

        p {
            margin: 5px 0;
        }
    }
}
</style>